<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<style>
			* {
				list-style: none;
				padding: 0px;
				margin: 0px;

			}

			button,
			select {
				font-size: 10px;
				text-align: center;
				width: 70px;
			}
					#Title {
				text-align: center;
				background-color: whitesmoke;
				
				margin-bottom: 4px;
			}

			#buttons {
				display: block;
				margin-bottom: 5px;
			}

			#control {
				font-size: 10px;
				display: flex;
				flex-wrap: nowrap;
				text-align: right;
				flex-direction: column;
				align-items: center;
			}

			#table {
				margin-top: 5px;
				font-size: 10px;
				width: 100%;
				padding: 0px 10px;
				text-align: center;
			}

			#table tr {
				box-shadow: 0px 2px 3px #e8e8e8;
			}

			#table_title {
				background-color: lightskyblue;
			}

			#table_title th,
			td {
				padding: 5px 0px;
			}
			
		</style>
	</head>
	<body>


		<div id="Title">
			<h4>订单列表</h4>
			<div style="font-size: 12px;">管理和查看所有用户订单</div>
		</div>

		<div id="control">
			<div id="buttons">
				<button>创建订单</button>
				<button>删除订单</button>
				<button>修改订单</button>
				<button>初始化订单</button>
			</div>
			<ol id="controlList">
				<li>订单编号:<input type="text" id="num" placeholder="输入0-8位数字编号" required /></li>
				<li>客户信息:<input type="text" id="inform" /></li>
				<li>订单金额:<input type="text" id="sum" placeholder="必须是数字"/></li>
				<li style="text-align: center; margin-top: 5px;">
					状态:<select id="condition">
						<option value="已完成">已完成</option>
						<option value="待支付">待支付</option>
						<option value="已取消">已取消</option>
					</select>
				</li>
			</ol>

		</div>
		<table id="table" cellspacing="0px">
			<tr id="table_title">
				<th>订单编号</th>
				<th>客户信息</th>
				<th>创建时间</th>
				<th>金额</th>
				<th>状态</th>
			</tr>
		</table>
	</body>
	<script src="订单列表操作.js">

	</script>
</html>